const  score = document.querySelector('.score'),
    start = document.querySelector('.start'),
    gameArea = document.querySelector('.gameArea'),
    car = document.createElement('div');

start.addEventListener('click', startGame);
document.addEventListener('keydown', startRun);
document.addEventListener('keyup', stopRun);

car.classList.add('car');

const keys = {
    ArrowUp: false,
    ArrowDown: false,
    ArrowRight: false,
    ArrowLeft: false
}

const settings = {
    start: false,
    score: 0,
    speed: 3,
    traffic: 3  
}
function getQuantityElements(elementHeight) {
    return document.documentElement.clientHeight / elementHeight + 1;
}

function startGame() {
    start.classList.add('hide');
    settings.start = true;
    addLines(getQuantityElements(100));
    gameArea.appendChild(car);
    settings.x = car.offsetLeft;
    settings.y = car.offsetTop;
    requestAnimationFrame(playGame);
    let counter = 0;
    const startTitle = document.createElement('div');
    startTitle.classList.add('startTitle');
    startTitle.innerText = 'Поехали!';
    const starting = setInterval(() => {
        car.style.display = 'block';
        setTimeout(() => {
            if (counter > 4) {
                car.style.display = 'block';
                gameArea.appendChild(startTitle);
                clearInterval(starting);
                setTimeout(() => {
                    startTitle.style.display = 'none'
                    addEnemies(getQuantityElements(100 * settings.traffic));
                }, 2000)
            } else {
                car.style.display = 'none';
            }
        }, 250);
        counter++;
    }, 500)
}

function getRandomIntInclusive(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min; //Максимум и минимум включаются
  };

function addLines(num) {
    for (let i = 0; i < num; i++) {
        const line = document.createElement('div');
        line.classList.add('line');
        line.style.top = i * 100 + 'px';
        line.y = i * 100;
        gameArea.appendChild(line); 
    }
}

function addEnemies(num) {
    for (let i = 0; i < num; i++) {
        const enemy = document.createElement('div');
        enemy.classList.add('enemy');
        enemy.y = -100 * settings.traffic * (i + 1);
        enemy.style.top = enemy.y + 'px';
        enemy.style.left = getRandomIntInclusive(50, gameArea.offsetWidth - 50) + 'px';
        gameArea.appendChild(enemy); 
        const enemyModel = randomModel(['enemy2', 'player', 'enemy', 'mycar']);

        enemy.style.background = `transparent url('./image/${enemyModel}.png') center / cover no-repeat`
    }
}

function randomModel(arr) {
    return arr[getRandomIntInclusive(0, arr.length - 1)]
}

function moveRoad() {
    let lines = document.querySelectorAll('.line');
    lines.forEach(line => {
        line.y += settings.speed;
        line.style.top = line.y + 'px';

        if (line.y >= document.documentElement.clientHeight) {
            line.y = -100;
        }
    })
}

function moveEnemy() {
    let enemies = document.querySelectorAll('.enemy');
    enemies.forEach(item => {
        item.y += settings.speed / 2;
        item.style.top = item.y + 'px';

        if (item.y >= document.documentElement.clientHeight) {
            const enemyModel = randomModel(['enemy2', 'player', 'enemy', 'mycar']);
            item.style.background = `transparent url('./image/${enemyModel}.png') center / cover no-repeat`
            item.style.left = getRandomIntInclusive(50, gameArea.offsetWidth - 50) + 'px';
            item.y = -100 * settings.traffic;
        }
    })
}

function playGame() {
    if (settings.start) {
        moveRoad();
        if (document.querySelector('.enemy')) moveEnemy()
        if (keys.ArrowLeft && settings.x > 0) {
            settings.x -= settings.speed;
        }
        if (keys.ArrowRight && settings.x < (gameArea.offsetWidth - car.offsetWidth)) {
            settings.x += settings.speed;
        }
        if (keys.ArrowDown && settings.y < (gameArea.offsetHeight - car.offsetHeight)) {
            settings.y += settings.speed;
        }
        if (keys.ArrowUp && settings.y > 0) {
            settings.y -= settings.speed;
        }
        car.style.left = settings.x + 'px';
        car.style.top = settings.y + 'px';
        requestAnimationFrame(playGame);
    }
}

function startRun(event) {
    event.preventDefault();
    keys[event.key] = true;
}

function stopRun(event) {
    event.preventDefault();
    keys[event.key] = false;
}